import React, { useState } from "react";
import { Redirect } from "react-router-dom";
import { Form, Icon, Input, Button, message, Spin } from "antd";
import { connect } from "react-redux";
import DocumentTitle from "react-document-title";
import "./index.less";
import { login, getUserInfo } from "@/store/actions";
import { LockOutlined, UserOutlined } from '@ant-design/icons'

const Login = (props) => {
  const { token, login, getUserInfo } = props;
  const [form] = Form.useForm()
  // const { getFieldDecorator } = form;

  const [loading, setLoading] = useState(false);

  const handleLogin = (username, password) => {
    // 登录完成后 发送请求 调用接口获取用户信息
    setLoading(true);
    login(username, password)
      .then((data) => {
        message.success("登录成功");
        handleUserInfo(data.token);
      })
      .catch((error) => {
        setLoading(false);
        message.error(error);
      });
  };

  // 获取用户信息
  const handleUserInfo = (token) => {
    getUserInfo(token)
      .then((data) => { })
      .catch((error) => {
        message.error(error);
      });
  };

  const handleSubmit = () => {
    form.validateFields().then(values => {
      const { username, password } = values;
      handleLogin(username, password);
    }).catch(error => {
      console.log(error)
    })
  };

  if (token) {
    return <Redirect to="/dashboard" />;
  }
  return (
    <DocumentTitle title={"用户登录"}>
      <div className="login-container">
        <Form onFinish={handleSubmit} className="content" form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }}>
          <div className="title">
            <h2>用户登录</h2>
          </div>
          <Spin spinning={loading} tip="登录中...">
            <Form.Item name="username" label="用户名" rules={[
              { required: true, message: '请输入用户名' },
              () => ({
                validator(_, value) {
                  if (!value || (value == value.trim() && value.length >= 0 && value.length <= 20)) {
                    return Promise.resolve()
                  }
                  return Promise.reject(new Error('用户名格式错误'))
                },
                initialValue: 'admin'
              })
            ]}>

              <Input
                prefix={
                  <UserOutlined style={{ fontSize: '16px', color: '#rgba(0,0,0,.25)' }} />
                }
                placeholder="用户名"
              />
            </Form.Item>
            <Form.Item name="password" label="密码" rules={[
              { required: true, message: '请输入密码' },
              () => ({
                validator(_, value) {
                  if (!value || (value == value.trim() && value.length >= 6 && value.length <= 20)) {
                    return Promise.resolve()
                  }
                  return Promise.reject(new Error('密码错误'))
                },
                initialValue: '123456'
              })
            ]}>
              <Input
                prefix={
                  <LockOutlined style={{ color: "rgba(0,0,0,.25)" }} />
                }
                type="password"
                placeholder="密码"
              />
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                登录
              </Button>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
              <span>账号 : admin 密码 : 123456</span>
            </Form.Item>
          </Spin>
        </Form>
      </div>
    </DocumentTitle>
  );
};

export default connect((state) => state.user, { login, getUserInfo })(
  Login
);

// const WrapLogin = Form.create()(Login);

// export default connect((state) => state.user, { login, getUserInfo })(
//   WrapLogin
// );
